<template name="index1">
	<view @top="hideModal" class="content">
		<cu-custom @event1="change($event)" @event2="change2($event)">
			<block slot="content">首页</block>
		</cu-custom>
		<view class="main" @touchmove.stop.prevent="moveHandle">
			<view class="row">
				<icon type='search' />
				<input class="input" @click="searchData" disabled="" placeholder='输入文章内容' v-model="clientname"></input>
			</view>
			<view class="hengzhe">
				<view class="qianmian">
					<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
						<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in swiperItem" :key="index"
						 @tap="tabSelect(item.name,index)" :data-id="index">
							{{item.name}}
						</view>

					</scroll-view>
				</view>
				<view class="jiahao" @click="openEdit">
					<view class="jiahao-inner">
						+
					</view>
				</view>
			</view>

			<swiper :style="{height:swiperheight + 'px'}" :current="TabCur" @change="tabChange">
				<swiper-item v-for="(item,index) in swiperItem" :key="index">
					<scroll-view scroll-y class="swiperStyle" @scrolltolower="buttomSC">
						<view class="cu-list menu-avatar">
							<view class="list-box" v-for="(sear,index) in item.scrollList" :key="index" :data-ida="sear.id" :data-id="sear.policyDetailsId"
							 :data-date="sear.publishTime" :data-tit="sear.title" @tap="getContent">
								<view class="list-content">
									<view class="list-inner">
										<view class="header">
											<view class="header-title">
												<!-- 											<text class="text-box"> -->
												{{ sear.title }}
												<!-- 											</text> -->
											</view>
											<view class="header-img">
												<view class="img-box">
													<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.gtimg.com%2Fqd_house%2Fpics%2Fhv1%2F72%2F216%2F145%2F9483777.jpg&refer=http%3A%2F%2Fimg1.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611990887&t=df43f7a52fcc771cb9fd66cfff49a226"
													 mode="" class="img"></image>
												</view>
											</view>
										</view>
										<view class="footer">
											<view class="footer-type">类型：{{ sear.type }}</view>
											<view class="footer-time">时间：{{ sear.publishTime }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="load-more">加载更多信息</view>
					</scroll-view>
				</swiper-item>
			</swiper>


			<!-- 模态框 -->
			<view class="cu-modal bottom-modal" :class="modalName2=='bottomModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-blue" @tap="offModal">确定</view>
						<view class="action text-blue" @tap="otModal">取消</view>
					</view>
					<view class="padding-xl">
						<view class="search-form round">
							<view class="content-box">
								<view class="fav-box" v-for="(item, index) in allswiItem" :key="index">
									<view :class="item.status === '0'?'favInner':'favInnerDef'" @tap="editFv(item,index)">{{ item.typeName }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				userinfo: {},
				titleId: '',
				count: '',
				content: '',
				status: true,
				swiperItem: [],
				allswiItem: [],
				postswiItem: [],
				swiperheight: 567,
				pageNo: 1,
				TabCur: 0,
				scroType: '政策文件',
				datalist: [],
				scrollLeft: 0,
				modalName: null,
				modalName2: null,
				clientname: '',
				editlist: []
			};
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success(res) {
					let height = res.windowHeight - 100
					that.swiperheight = height
				}
			})
			let token = uni.getStorageSync("token")
			this.token = token
			let userinfo = uni.getStorageSync("userinfo")
			this.userinfo = userinfo

			this.daohang()

		},
		methods: {
			searchData() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			// 上拉加载获得新列表
			buttomSC() {
				this.pageNo = this.pageNo + 1
				if (this.scroType === '政策文件') {
					var data = {
						type: '政策列表',
						pageNo: this.pageNo
					}
				} else {
					var data = {
						type: this.scroType,
						pageNo: this.pageNo
					}
				}
				uni.showLoading({
					title: '加载中'
				})

				this.http.getaction('/policy/policy/list', data)
					.then(res => {
						var a = setInterval(() => {
							for (var i = 0; i < res.data.result.records.length; i++) {
								if (i < 9) {
									this.swiperItem[this.TabCur].scrollList.push(res.data.result.records[i])
								}
								if (i >= 9) {
									this.swiperItem[this.TabCur].scrollList.push(res.data.result.records[i])
									clearTimeout(a)
									uni.hideLoading()
								}
							}
						}, 1000)
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 页面生成获得最初列表
			getlist() {

				var data = {
					type: this.swiperItem[0].name,
					pageNo: this.pageNo
				}
				this.http.getaction('/policy/policy/list', data)
					.then(res => {
						this.swiperItem[0].scrollList = res.data.result.records
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 导航栏操作，切换类别
			tabSelect(data, index) {
				// console.log(data)
				this.pageNo = 1
				this.TabCur = index
				this.scrollLeft = ((index - 1) - 1) * 60
			},
			// 列表区操作，切换类别
			tabChange(e) {
				var index = e.detail.current
				var name = this.swiperItem[index].name
				this.scroType = name
				this.pageNo = 1
				this.TabCur = index
				// console.log(name)
				if (this.scroType === '政策文件') {
					var data = {
						type: '政策列表',
						pageNo: this.pageNo
					}
				} else {
					var data = {
						type: this.scroType,
						pageNo: this.pageNo
					}
				}
				this.http.getaction('/policy/policy/list', data)
					.then(res => {
						this.swiperItem[this.TabCur].scrollList = res.data.result.records
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 跳转到内容详情
			getContent(a) {
				var id = a.currentTarget.dataset.id
				this.titleId = a.currentTarget.dataset.ida
				console.log(this.titleId)
				// console.log('查询内容：' + id)
				// console.log('文章id：' + this.titleId)
				this.article()
				this.collecStu()
				this.lishi()
				// 获得文章收藏量
				var data = {
					articleId: this.titleId
				}
				this.http.getaction('/policy/articleCollectionExe/queryByArticleId', data)
					.then(res => {
						this.count = res.data.result.count
						var data = {
							titleId: this.titleId,
							publishTime: a.currentTarget.dataset.date,
							title: a.currentTarget.dataset.tit,
							count: this.count,
							status: this.status
						}
						this.navigate(id, this.titleId, a.currentTarget.dataset.date, a.currentTarget.dataset.tit, this.count, this.status)

					})
					.catch(err => {
						console.log(err)
					})

			},
			// 跳转
			navigate(id, tid, publishTime, title, count, status) {
				var data = {
					articleId: tid
				}
				this.http.getaction('/policy/clickCountExe/getClick', data)
					.then(res => {
						var clickCount = res.data.result.clickCount
						uni.navigateTo({
							url: '../article/article?id=' + id + '&tid=' + tid + '&count=' + count + '&clickCount=' + clickCount +
								'&publishTime=' +
								publishTime + '&title=' + title + '&status=' + status
						})


					})
					.catch(err => {
						console.log(err)
					})
			},
			// 文章点击量
			article() {
				var data = {
					articleId: this.titleId
				}
				this.http.putaction('/policy/clickCountExe/edit', data)
					.then(res => {
						var a = JSON.stringify(res)
					})
					.catch(err => {
						console.log(err)
					})
			},

			// 用户对此文章的收藏状态
			collecStu() {
				var data = {
					userId: this.userinfo.id,
					articleId: this.titleId
				}
				this.http.getaction('/policy/articleCollectionExe/getStatus', data)
					.then(res => {
						this.status = res.data.result.status
					})
					.catch(err => {
						console.log(err)
					})

			},

			// 用户历史记录
			lishi() {
				var data = {
					userId: this.userinfo.id,
					articleId: this.titleId,
					tag: "历史记录"
				}
				this.http.postaction('/policy/articleCollectionExe/addHistory', data)
					.then(res => {})
					.catch(err => {
						console.log(err)
					})
			},

			// 导航
			daohang() {

				// 获得展示导航
				var data = {
					username: this.userinfo.username
				}
				this.http.getaction('/policy/userTypeExe/list', data)
					.then(res => {

						this.swiperItem = res.data.result
						var a = JSON.stringify(res.data.result)
						if (this.swiperItem[0].name === '政策文件') {
							var data = {
								type: '政策列表',
								pageNo: this.pageNo
							}
						} else {
							var data = {
								type: this.swiperItem[0].name,
								pageNo: this.pageNo
							}
						}
						console.log(this.swiperItem[0].name)
						this.http.getaction('/policy/policy/list', data)
							.then(res => {
								this.swiperItem[0].scrollList = res.data.result.records
								this.http.getaction('/policy/policy/list', data)
									.then(res => {
										this.swiperItem[0].scrollList = res.data.result.records
									})
									.catch(err => {
										console.log(err)
									})
							})
							.catch(err => {
								console.log(err)
							})
					})
					.catch(err => {
						console.log(err)
					})

				// 获得所有导航
				var date = {
					username: this.userinfo.username
				}
				this.http.getaction('/policy/userTypeExe/allList', data)
					.then(res => {
						this.allswiItem = res.data.result
						var a = JSON.stringify(res.data.result)
					})
					.catch(err => {
						console.log(err)
					})

			},

			editFv(item, index) {
				if (this.allswiItem[index].status === '1') {
					this.allswiItem[index].status = '0'


				} else {
					this.allswiItem[index].status = '1'

				}



			},

			clicu(id) {
				console.log(id)
			},
			hideModal(e) {
				this.modalName = null
			},
			change(data) {
				this.modalName = data
			},
			hideModal() {
				this.modalName = null
			},
			moveHandle(){
				
			},
			change2(data) {
				this.modalName2 = data
			},
			// 取消编辑
			otModal() {
				this.modalName2 = null
			},
			openEdit() {
				this.modalName2 = 'bottomModal'
			},
			// 确定频道编辑
			offModal() {
				console.log(this.allswiItem)
				var data = {
					list: this.allswiItem
				}
				this.http.putaction('/policy/userTypeExe/edit', data)
					.then(res => {
						var data = {
							username: this.userinfo.username
						}
						this.http.getaction('/policy/userTypeExe/list', data)
							.then(res => {
								this.swiperItem = res.data.result
								var a = res.data.result

								this.modalName2 = null
								this.TabCur = 0
								if (this.swiperItem[this.TabCur].name === '政策文件') {
									var data = {
										type: '政策列表',
										pageNo: this.pageNo
									}
								} else {
									var data = {
										type: this.swiperItem[this.TabCur].name,
										pageNo: this.pageNo
									}
								}

								this.http.getaction('/policy/policy/list', data)
									.then(res => {
										this.swiperItem[this.TabCur].scrollList = res.data.result.records
									})
									.catch(err => {
										console.log(err)
									})
							})
							.catch(err => {
								console.log(err)
							})
					})
					.catch(err => {
						console.log(err)
					})

			},
		}
	}
</script>

<style>
	.content{
	}
	.main{
		height: 0;
	}
	.list-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.list-content {
		height: 320upx;
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 25upx;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list-inner {
		width: 94%;
		height: 280upx;
	}

	.header {
		width: 100%;
		height: 230upx;

		display: flex;
		justify-content: space-between;
	}

	.header-title {
		width: 60%;
		height: 180upx;
		/* 		line-height: 40upx; */
		overflow: hidden;
		line-height: 60upx;
		font-size: 38upx;
		font-weight: 600;
	}

	.header-img {
		width: 38%;
		height: 230upx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.img-box {
		width: 100%;
		height: 210upx;
		background-color: #FFFFFF;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.footer {
		width: 100%;
		height: 50upx;
		display: flex;
		justify-content: space-between;
	}

	.footer-type {
		color: #8799A3;
	}

	.footer-time {
		color: #8799A3;
	}

	.swiperStyle {
		height: 100%;
	}

	.load-more {
		text-align: center;
		color: #AAAAAA;
	}

	.load-more {
		text-align: center;
		color: #AAAAAA;
		padding: 10upx;
	}

	.DrawerPage {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0vw;
		background-color: #f1f1f1;
		transition: all 0.4s;
	}

	.DrawerPage.show {
		transform: scale(0.9, 0.9);
		left: 85vw;
		box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
		transform-origin: 0;
	}

	.DrawerWindow {
		position: absolute;
		width: 85vw;
		height: 100vh;
		left: 0;
		top: 0;
		transform: scale(0.9, 0.9) translateX(-100%);
		opacity: 0;
		pointer-events: none;
		transition: all 0.4s;
		padding: 100upx 0;
	}

	.DrawerWindow.show {
		transform: scale(1, 1) translateX(0%);
		opacity: 1;
		pointer-events: all;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 90upx;
		background: #ffffff;
	}

	.input {
		padding-left: 10px;
	}

	.selectView {
		position: fixed;
		z-index: 9999;
		width: 100%;
	}

	.DrawerClose {
		position: absolute;
		width: 40vw;
		height: 100vh;
		right: 0;
		top: 0;
		color: transparent;
		padding-bottom: 30upx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
		letter-spacing: 5px;
		font-size: 50upx;
		opacity: 0;
		pointer-events: none;
		transition: all 0.4s;
	}

	.DrawerClose.show {
		opacity: 1;
		pointer-events: all;
		width: 15vw;
		color: #fff;
	}

	.DrawerPage .cu-bar.tabbar .action button.cuIcon {
		width: 64upx;
		height: 64upx;
		line-height: 64upx;
		margin: 0;
		display: inline-block;
	}

	.DrawerPage .cu-bar.tabbar .action .cu-avatar {
		margin: 0;
	}

	.DrawerPage .nav {
		flex: 1;
	}

	.DrawerPage .nav .cu-item.cur {
		border-bottom: 0;
		position: relative;
	}

	.DrawerPage .nav .cu-item.cur::after {
		content: "";
		width: 10upx;
		height: 10upx;
		background-color: currentColor;
		position: absolute;
		bottom: 10upx;
		border-radius: 10upx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.DrawerPage .cu-bar.tabbar .action {
		flex: initial;
	}

	.tag-inner {
		font-size: 25upx;
		color: #8799A3;
	}

	.content-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.fav-box {
		margin-top: 10upx;
		width: 150upx;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.favInner {
		background-color: #8799A3;
		width: 140upx;
		height: 40upx;
		border-radius: 8%;
	}

	.favInnerDef {
		background-color: #0081FF;
		width: 140upx;
		height: 40upx;
		border-radius: 8%;
		color: #FFFFFF;
	}

	.hengzhe {
		display: flex;
		justify-content: space-between;
	}

	.jiahao {
		width: 10%;
		height: 90upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.jiahao-inner {
		font-size: 60upx;
	}

	.qianmian {
		width: 90%;

	}
</style>
